<template>
    <div class="team my-4">
        <v-container>
            <v-layout row wrap>
                <v-flex xs12 sm6 md4 lg3 v-for="person in team" :key="person.name">
                    <v-card text class="text-xs-center ma-3">
                        <v-responsive class="pt-3 text-center">
                            <v-avatar item color="blue">
                                <img :src="person.avatar" alt="">
                            </v-avatar>
                        </v-responsive>
                        <v-card-text>
                            <div class="subheading">{{person.name}}</div>
                            <div class="grey--text">{{person.role}}</div>
                        </v-card-text>
                        <v-card-actions>
                            <v-btn text color="grey">
                                <v-icon small left>message</v-icon>
                                <span>Message</span>
                            </v-btn>
                        </v-card-actions>
                    </v-card>
                </v-flex>
            </v-layout>
        </v-container>
    </div>
</template>

<script>
export default {
    name: "Team",
    data(){
        return {
            team:[
                {name: "Marcos Silva", role: "Project Manager", avatar: require('../assets/avatars/avatar-m-1.png')},
                {name: "Patrick James", role: "Software Developer", avatar: require('../assets/avatars/avatar-m-2.png')},
                {name: "Max Morono", role: "Marketing Manager", avatar: require('../assets/avatars/avatar-m-3.png')},
                {name: "Ray Gilbred", role: "Digital Marketer", avatar: require('../assets/avatars/avatar-m-4.png')},
                {name: "Nidh Lakhani", role:"Web Desiner", avatar: require('../assets/avatars/avatar-m-5.png')},
            ]
        }
       
    }
}
</script>